<template>
    <el-row :gutter="10" :style="{ width: '100%' }">
        <el-col :span="16">
            <el-tree-select v-model="checkedUnit.unityId" :data="options" :props="props" check-strictly
                :render-after-expand="false" @change="changeUnit" />
        </el-col>
        <el-col :span="8">
            <el-select v-model="checkedUnit.views" @change="changeViews">
                <el-option v-for="item in UNIT_TYPE_VIEW_Map_LIST" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </el-col>
    </el-row>
</template>
<script setup>
import { getUnitTree } from '@/api/manage/units-manager/units-manager/index';
import { storageLocal } from "@pureadmin/utils";
import { UNIT_TYPE_VIEW_Map, UNIT_TYPE_VIEW_Map_LIST } from '@/constant/index'
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import { usePageReloadStoreHook } from "@/store/modules/pageReload";
const usePageVariablesStore = usePageVariablesStoreHook()
const options = ref([])
const checkedUnit = ref(usePageVariablesStore.getManage())
const props = {
    label: 'unityName',
    value: 'id',
    children: 'childs',
}

onMounted(() => {
    getUnitTree().then(res => {
        options.value = res.result.data
        if (!getUnisIds(options.value).includes(checkedUnit.value.unityId)) {
            checkedUnit.value.unityId = res.result.data.id
            checkedUnit.value.views = UNIT_TYPE_VIEW_Map.current
            usePageVariablesStore.setManage(checkedUnit.value)
            // window.location.reload()
        }
        if (!checkedUnit.value.views) {
            checkedUnit.value.views = UNIT_TYPE_VIEW_Map.current
            usePageVariablesStore.setManage(checkedUnit.value)
        }
    })
})

const getUnisIds = (arr, ids = []) => {
    arr.forEach(item => {
        if (item.childs) {
            getUnisIds(item.childs, ids)
        }
        ids.push(item.id)
    })
    return ids
}

const changeViews = (val) => {
    usePageVariablesStore.setManage(checkedUnit.value)
    // window.location.reload()
    usePageReloadStoreHook().reloadPages()
}

const changeUnit = (val) => {
    usePageVariablesStore.setManage(checkedUnit.value)
    // window.location.reload()
    usePageReloadStoreHook().reloadPages()
}

</script>
<style lang="scss" scoped></style>